<template>  
  <div>  
    <el-button type="primary" @click="openDialog()">新增角色1</el-button>  
    <el-table :data="list" style="width: 100%">  
      <el-table-column prop="name" label="角色名称" />  
      <el-table-column prop="state" label="启用" :formatter="formatState" />  
      <el-table-column prop="description" label="描述" />  
      <el-table-column label="操作" fixed="right"  min-width="120">  
        <template #default="scope">  
          <el-button type="primary" size="small" @click="openDialog(scope.row)">编辑</el-button>  
          <el-button type="danger" size="small"  @click="confirmDelete(scope.row.id)">删除</el-button>  
        </template>  
      </el-table-column>  
    </el-table>  

    <el-dialog  v-model="dialogVisible" :title="title"  :before-close="handleClose">  
      <add-role  
        ref="users"
        v-model:dialogVisible="dialogVisible"  
        @addSuccess="getRoleListAPI"  
        :roleData="currentRole"  
        @update:dialogVisible="resetFormData"  
      ></add-role>  
    </el-dialog>  
  </div>  
</template>  

<script setup>  
import { ref, onMounted,getCurrentInstance } from 'vue';  
import { getRoleList, delRole } from '@/api/index';  
import { ElMessage,ElMessageBox } from 'element-plus';  
import AddRole from './fomeData.vue';  
// 这里是挂载到proxy实例的上边，可以实现全局调用
const { proxy } =  getCurrentInstance()
const list = ref([]);  
const title = ref('');  
const dialogVisible = ref(false);  
const currentRole = ref(null);  

const getRoleListAPI = async () => {  
  list.value = await getRoleList();  
};  

const formatState = (row) => {  
  return row.state === 1 ? '启用' : '禁用';  
};  

const openDialog = (role) => {  
  if (role) {  
    currentRole.value = { ...role }; // 复制角色数据  
    title.value = '编辑角色'; // 设置标题为编辑  
  } else {  
    title.value = '新增角色'; // 设置标题为新增  9
  }  

  dialogVisible.value = true; // 打开对话框  
};  
//对话框右上角的关闭事件
const handleClose = () => {
  //  console.log(' proxy.$refs["users"]', proxy.$refs["users"]);
    //关闭对话框
    dialogVisible.value=false
    proxy.$refs["users"].leclose()
}
const confirmDelete = (id) => {  
      // 删除
      ElMessageBox.confirm("你确定要删除吗？").then(async()=>{
        await delRole(id);  
        ElMessage({
            showClose:true,
            message:'删除成功',
            type:'success'
        })
        getRoleListAPI();  
    })
};  
const resetFormData = () => {  
  currentRole.value = null; // 清空当前角色  
}; 

onMounted(() => {  
  getRoleListAPI();  
});  
</script>  

<style scoped>  
/* 这里可以添加样式 */  
</style>